Uppdaterad 2024-03-11

CSS

Förkortningar

CSS - Cascading Stylesheet
WYSIWYG - What You See Is What You Get

BEM - Block Element Modifier
OOCSS - Object-Oriented CSS
SMACSS - Scalable and Modular Architecture for CSS

Namn och kodpunkt för ikoner från Font Awesome `4.7.0` (den sista versionen som var helt gratis)

fa-css3

Filändelser

.css

Prefix

Vendor prefix

Element

Pseudo

Syntax

selektor {
	egenskap: värde;
}

Enheter för värden

%
rem
em
px
rem
vh
vw
vmin
vmax

Can I use Viewport units: vw, vh, vmin, vmax

W3.org Style Examples units

Pseudo-element

:before
:after

:link
:visited
:hover
:active

:focus
:focus-ring

:lang
:has
:emptyt
:root
:first-line
:nth-child(2n+1)
:target
…

Selektorer

Shorthand

background
border
font
margin
padding

CSS kan användas på tre olika sätt i HTML

<link rel="stylesheet" href="stylesheet.css"> <style></style> <tagg style="">

Tagg i HTML

style

Attribut i HTML

style

class
id

Kommentarer

/* En kommentar */ Kopp med texten CSS is awesome

Färger kan skrivas på flera än ett sätt

Format för värde	Exempel på kod
Namn	`red`
HEX	`#ff0000`
RGB	`rgb(255,0,0)` (upp till 255)
RGBA (för genomskinlighet)	`rgba(255,0,0,0.5)`
HSL	`hsl()`

Vill du veta mer om färger, se vilka som finns namngivna och vilka som är webbsäkra? Läs mer på vår sida som handlar om färger.

Vendor prefix

-webkit
-moz
-o
-ms

@-rules

@font-face
@keyframes
@media
@supports
@import

Media Queries Level 5

Exempel på hur en media query för mörkt tema kan se ut i CSS

@media (prefers-color-scheme: dark) {

Exempel

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-filter: blur(2px);

box-sizing: border-box;
box-ordinal-group: 1;
clear: both;
float: none;
text-transform: capitalize;

align-items: center;
display: flex;
justify-content: center;

-moz-hyphens: auto;
word-wrap: break-word;
pointer-events: none;

mix-blend-mode: hard-light;
object-fit: cover;
text-overflow: ellipsis;
-webkit-overflow-scrolling: touch;
html {touch-action: manipulation;}
backdrop-filter: saturate(180%) blur(20px)
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%)

Nyheter i CSS 3

Animation
Transform (translate, rotate, scale)
Transition
Rounded corners
Shadow

Exempel på grid

display: grid;
grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
grid-gap: 0 12px;

Styling för iOS Safari

-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */

Logotyp för BEM - Block Element Modifier

Ramverk

Sass

Preprocessing
Variables
Nesting
Partials
Import
Mixins
Extend/Inheritance
Operators

Less

Variables
Mixins
Nested rules
Media query bubbling and nested media queries
Operations
a href="funktioner">Functions
Namespaces and Accessors
Scope
Comments

//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js

Filer

normalize.css reset.css

Länkar

Omslagsbild för låten Gangnam style av PSY

Externa länkar

Vertical center

CSS minifier.com cURL

Kuriosa

CCS hudvård

Conditional CSS rule targeting Firefox Quantum

Targeting only Firefox with CSS

body::before {
  content: 'Not Fx';
}
@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }
  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}

Sätt header för CSS med PHP

header('Content-Type: text/css');

CSS

Namn och kodpunkt för ikoner från Font Awesome 4.7.0 (den sista versionen som var helt gratis)